<%@ page contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html LANG="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>设置</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
#myModal .modal-body {
	height: 400px;
}

.alert.with-icon {
	display: table;
	width: 100%;
}

.alert.with-icon>[class*="glyphicon-"], .alert.with-icon>[class*="glyphicon-"]+.content
	{
	display: table-cell;
	float: none;
	min-height: 0;
	margin: 0;
	vertical-align: middle;
}

.alert.with-icon>[class*="glyphicon-"] {
	width: 40px;
}

.alert.with-icon>[class*="glyphicon-"]+.content {
	padding-left: 1em;
}

.alert > [class*="glyphicon-"] {
  float: left;
  margin-top: -5px;
  font-size: 42px;
  opacity: .6;
  -webkit-transition: opacity .3s cubic-bezier(.175, .885, .32, 1);
       -o-transition: opacity .3s cubic-bezier(.175, .885, .32, 1);
          transition: opacity .3s cubic-bezier(.175, .885, .32, 1);
}
</style>
<script src="scripts/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-progressbar.js"></script>
<!--[if lt IE 9]>
  <script src="bootstrap/js/html5shiv.min.js"></script>
  <script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			<a class="navbar-brand" href="index.html"><strong>卓越搜索</strong></a>
		</div>
		<div>
			<ul class="nav navbar-nav">
				<li><a href="index.html">主页</a></li>
				<li class="active"><a href="setting">设置</a></li>
         		<li><a href="stat">搜索词</a></li>
			</ul>
		</div>
	</nav>
	<div style="padding: 10px 10px 10px;">
		<div class="container">
			<form class="bs-example bs-example-form" id="searchForm" role="form" action="setting" method="post">
				<h4>上次索引时间：${lastIndexDate}</h4><br/>
				<div id="alert" class="alert alert-danger with-icon" style="display: none;">
					<i class="glyphicon glyphicon-time"></i>
					<div class="content">索引进行中，请耐心等候。</div> 
				</div>
				<div id="group" class="form-group">
					<label for="searchDirs" class="col-sm-2 control-label">扫描目录：</label>
					<textarea id="searchDirs" name="searchDirs" class="form-control" rows="5"></textarea>
					<p class="help-block">多目录请换行。</p>
				</div>
				<div id="alert2" class="alert alert-danger with-icon" style="display: none;">
					<i class="glyphicon glyphicon-warning-sign"></i>
					<div id="content2" class="content">扫描目录必须填写。</div> 
				</div>
				<br/><button type="button" id="btn1" onclick="formSubmit();" class="btn btn-default">索引</button>
			</form>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">等待索引完成</h4>
				</div>
				<div class="modal-body">
					<div id="progressbar"></div>
					<div id="clock" class="alert alert-info">
						已等待：&nbsp;<strong>0</strong>&nbsp;分&nbsp;<strong>0</strong>&nbsp;秒
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var timer;
	var seconds = 0;
	var indexing = "${indexing}";

	$(document).ready(function() {
		var dirs = "${searchDirs}";
		$("#searchDirs").val(
				dirs.replace(new RegExp("<br/>", "g"), "\r\n").replace(
						new RegExp("&#92;", "g"), "\\"));
		if (indexing === "yes") {
			waiting();
		}
	});
	
	function waiting() {
		$("#searchDirs").attr("disabled", "disabled");
		$("#btn1").attr("disabled", "disabled");
		$("#alert").attr("style", "display:block;");
	}

	function formSubmit() {
		if (indexing === "no") {
			var dirs = $("#searchDirs").val();
			if ($.trim(dirs) === "") {
				$("#group").attr("class", "form-group has-error");
				$("#alert2").attr("style", "display:block;");
				return;
			}
			$("#group").attr("class", "form-group");
			$("#alert2").attr("style", "display:none;");
			$("#btn1").attr("disabled", "disabled");
			$('#myModal').modal("show");
			$('#searchForm').submit();
		} else {
			waiting();
		}
	}

	$('#myModal').on('shown.bs.modal', function() {
		$('#progressbar').progressbar({
			warningMarker : 60,
			dangerMarker : 80,
			maximum : 100,
			step : 1
		});
		timer = window.setInterval("clock()", 1000);
	});

	$('#myModal').on('hidden.bs.modal', function() {
		window.clearInterval(timer);
		$('#myModal').modal("show");
	});

	function clock() {
		$('#progressbar').progressbar('stepIt');
		seconds++;
		var minutes = Math.floor(seconds / 60);
		$("#clock").html("已等待：&nbsp;<strong>" + minutes + "</strong>&nbsp;分&nbsp;<strong>" 
			+ (seconds - minutes * 60) + "</strong>&nbsp;秒");
	}

	$('#progressbar').on("positionChanged", function(e) {
		if (e.percent === 100) {
			$('#progressbar').progressbar('reset');
		}
	});
</script>
</html>